<template>
<div>
    <el-button @click="add()">添加数据</el-button>
    <!-- <el-button @click="log()">log</el-button> -->
    <el-button @click="save()">保存改动到服务器</el-button>
    <el-button @click="logOut()">退出登录</el-button>
    <el-table
    :data="tableData.filter(data => !search || data.name.includes(search)||data.type.includes(search))"
    style="width: 100%">
    <el-table-column
      label="书本名称"
      prop="name">
    </el-table-column>
    <el-table-column
      label="作者"
      prop="author">
    </el-table-column>
    <el-table-column
      label="类型"
      prop="type">
    </el-table-column>
    <el-table-column
      label="价格"
      prop="price">
    </el-table-column>

    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          type="text"
          v-model="search"
          size="mini"
          placeholder="根据类型以及书名进行搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">修改</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

<!-- 添加dialogue -->
    <template>
      <el-dialog
        title="添加书本"
        :visible.sync="addDialogue"
        width="30%"
       >
      
            <el-form  label-width="80px">
            <el-form-item label="书名">
              <el-input v-model="user.name" ></el-input>
            </el-form-item>
            <el-form-item label="作者">
              <el-input v-model="user.author"></el-input>
            </el-form-item>
            <el-form-item label="类型">
              <el-input v-model="user.type"></el-input>
            </el-form-item>
            <el-form-item label="价格">
              <el-input v-model="user.price"></el-input>
            </el-form-item>                                
          </el-form>
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancle()">取 消</el-button>
        <el-button type="primary" @click="handleAdd()">确定</el-button>
      </span>
     </el-dialog>
    </template>
<!-- 修改dialogue -->
    <template>
      <el-dialog
        title="修改书本"
        :visible.sync="editDialogue"
        width="30%"
       >
      
            <el-form  label-width="80px">
            <el-form-item label="书名">
              <el-input v-model="user.name" ></el-input>
            </el-form-item>
            <el-form-item label="作者">
              <el-input v-model="user.author"></el-input>
            </el-form-item>
            <el-form-item label="类型">
              <el-input v-model="user.type"></el-input>
            </el-form-item>
            <el-form-item label="价格">
              <el-input v-model="user.price"></el-input>
            </el-form-item>                                
          </el-form>
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleEditCancle()">取 消</el-button>
        <el-button type="primary" @click="handleEditSure()">确定</el-button>
      </span>
     </el-dialog>
    </template>
</div>
</template>

<script>
  export default {
    data() {
      return {
        addDialogue: false,
        editDialogue:false,
        tableData: [],
        search: '',
        temp:{},
        //emmm那个user应该是book的，后面才发现弄错了，懒得改了。。。。。。
        user:{
            name:'',
            author:'',
            type:'',
            price:''
        }
      }
    },


    methods: {
// 编辑功能

        handleEdit(index, row) {
            console.log(row);

            this.user.name=row.name;
            this.user.author=row.author;
            this.user.type=row.type;
            this.user.price=row.price;
            this.editDialogue=true;
            this.temp=row;
            
           // console.log(this.tableData)
        },
        handleEditSure(){
            this.temp.name=this.user.name;
            this.temp.author=this.user.author;
            this.temp.type=this.user.type;
            this.temp.price=this.user.price;
            this.temp={};

            
            this.editDialogue=false;
            //清零
            this.user.name='';
            this.user.author='';
            this.user.type='';
            this.user.price='';

        },
        handleEditCancle(){
            this.editDialogue=false;
        },
// 添加功能
        add(){
            console.log(this.addDialogue)
            this.addDialogue=true;
        },
        handleCancle(){
             this.addDialogue=false;
        },
        handleAdd(){
            this.tableData.unshift({
                name:this.user.name,
                author:this.user.author,
                type:this.user.type,
                price:this.user.price,
                id:'',
            })
            this.addDialogue=false;
            //清零
            this.user.name='';
            this.user.author='';
            this.user.type='';
            this.user.price='';
        },
      //保存改动
      save(){
        this.$axios.post('http://localhost:8082/saveChange',this.tableData)
      },
      //登出
      logOut(){
        sessionStorage.setItem("account",'');
        this.$router.push('/login'); 

      },

        log(){
            console.log(this.tableData);
            console.log(window.sessionStorage.getItem('account'));
        },


// 删除功能
      handleDelete(index, row) {
        console.log(index, row);
 
          this.$confirm('确定删除该房间吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.handleDeleteSure(index,row);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      handleDeleteSure(index, row) {
        this.tableData.splice(index, 1);    
      },
    },
    created () {
        this.$axios.post('http://localhost:8082/query',this.tableData)
        .then(res=>{
            this.tableData=res.data.data.books;
            
        })
    }
  }
</script>